<template>
    <div class="app-container">
        <!-- 页面头部 -->
        <div class="page-header">
            <router-link class="back-link" to="/main/renshi/renshizhidu/neibudiaodong/neibudiaodong">
                <i class="el-icon-arrow-left"></i>
                返回
            </router-link>
            <h2>内部调动列表</h2>
        </div>
        <!-- 筛选容器 -->
        <div class="filter-container">
            <el-input
                v-model="listQuery.keyword"
                placeholder="请输入关键字"
                style="width: 200px;"
                class="filter-item"
                @keyup.enter.native="handleFilter"
            />
            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
                搜索
            </el-button>
            <el-button class="filter-item" type="primary" icon="el-icon-plus" @click="handleCreate">
                新增
            </el-button>
            <!-- <el-button class="filter-item" type="primary"  @click="goBack">
                返回
            </el-button> -->
        </div>
        <!-- 表格 -->
        <div style="margin-bottom: 20px;">
            <el-table
                v-loading="listLoading"
                :data="list"
                element-loading-text="Loading"
                border
                fit
                highlight-current-row
                style="width: 100%"
            >
                <el-table-column label="序号" type="index" width="50" align="center" />
                <el-table-column label="调出单位主管" width="120" align="center">
                    <template slot-scope="scope">
                        {{ scope.row.transferOutName }}
                    </template>
                </el-table-column>
                <el-table-column label="调出时间" align="center">
                    <template slot-scope="scope">
                        {{ scope.row.transferOutDate | parseTime }}
                    </template>
                </el-table-column>
                <el-table-column label="接收单位主管" align="center">
                    <template slot-scope="scope">
                        {{ scope.row.transferInName }}
                    </template>
                </el-table-column>
                <el-table-column label="接收时间" align="center">
                    <template slot-scope="scope">
                        {{ scope.row.transferInDate | parseTime }}
                    </template>
                </el-table-column>
                <el-table-column label="创建时间" align="center">
                    <template slot-scope="scope">
                        {{ scope.row.createTime | parseTime }}
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="230" align="center">
                    <template slot-scope="scope">
                        <el-button
                            size="mini"
                            @click="handleView(scope.row)"
                        >查看</el-button>
                        <el-button
                            size="mini"
                            type="primary"
                            @click="handleUpdate(scope.row)"
                        >编辑</el-button>
                        <el-button
                            size="mini"
                            type="danger"
                            @click="handleDelete(scope.row)"
                        >删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!-- 分页组件 -->
        <pagination
            v-show="total > 0"
            :total="total"
            :page.sync="listQuery.pageNum"
            :limit.sync="listQuery.pageSize"
            @pagination="getList"
        />
    </div>
</template>

<script>
import { getTransferPage, deleteTransfer } from '@/api/transfer'
import Pagination from '@/components/Pagination'

export default {
    name: 'TransferList',
    components: { Pagination },
    filters: {
        parseTime(time) {
            return time ? new Date(time).toLocaleString() : ''
        }
    },
    data() {
        return {
            list: null,
            total: 0,
            listLoading: true,
            listQuery: {
                pageNum: 1,
                pageSize: 10,
                keyword: ''
            }
        }
    },
    created() {
        this.getList()
    },
    methods: {
        getList() {
            this.listLoading = true
            getTransferPage(this.listQuery).then(response => {
                this.list = response.data.records
                this.total = response.data.total
                this.listLoading = false
            })
        },
        handleFilter() {
            this.listQuery.pageNum = 1
            this.getList()
        },  
        handleCreate() {
            this.$router.push('/main/renshi/renshizhidu/neibudiaodong/neibudiaodong')
        },
        goBack() {
            this.$router.push('/main/renshi/renshizhidu')
        },
        handleView(row) {
            this.$router.push({
                path: '/main/renshi/renshizhidu/neibudiaodong/neibudiaodong',
                query: { id: row.id, type: 'view' }
            })
        },
        handleUpdate(row) {
            this.$router.push({
                path: '/main/renshi/renshizhidu/neibudiaodong/neibudiaodong',
                query: { id: row.id, type: 'edit' }
            })
        },
        handleDelete(row) {
            this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                deleteTransfer(row.id).then(() => {
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    })
                    this.getList()
                })
            }).catch(() => {
                // 用户取消操作，这里可以添加一些提示信息，也可以不做处理
                this.$message({
                    type: 'info',
                    message: '操作已取消'
                })
            })
        }
    }
}
</script>

<style scoped>
/* 设置全局字体为宋体 */
body {
    font-family: '宋体', sans-serif;
}

/* 容器样式 */
.app-container {
    padding: 20px;
    /* background-color: #f5f7fa; */
    border-radius: 8px;
    /* box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); */
    min-height: calc(100vh - 40px);
    width: 1200px;
    margin: 0 auto;
}

/* 页面头部样式 */
.page-header {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    background-color: #fff;
    padding: 0px 24px;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

/* 返回链接样式 */
.back-link {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: #409EFF;
    font-size: 16px;
    margin-right: 20px;
    transition: all 0.3s;
}

.back-link i {
    margin-right: 5px;
}

.back-link:hover {
    opacity: 0.8;
}

/* 标题样式 */
.page-header h2 {
    margin: 0;
    font-size: 22px;
    font-weight: 500;
    color: #303133;
}

/* 筛选容器样式 */
.filter-container {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
    background-color: #fff;
    padding: 20px 0px;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

/* 筛选项样式 */
.filter-item {
    margin-right: 15px;
}

/* 表格样式 */
.el-table {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

/* 表格表头样式 */
.el-table__header th {
    background-color: #f2f2f2;
    color: #333;
    font-weight: bold;
}

/* 表格行悬停样式 */
.el-table__body tr:hover {
    background-color: #f5f5f5;
}

/* 分页组件样式 */
.pagination {
    margin-top: 20px;
    text-align: center;
}

/* 按钮样式 */
.el-button {
    border-radius: 4px;
    padding: 8px 13px;
    font-family: '宋体';
    font-size: 1em;
}
</style>